import Vue from 'vue'
import Component from 'vue-class-component'
import {formatDate} from '../../utils/commonMethod/method.js'

@Component({
  props: {
    itemValue: Object
  }
})

export default class TopicItemClass extends Vue {
  mytopics = {}
  stateType = '未上架'
  classType = ''
  handlerPush() {
    this.$router.push({name: 'TopicDetails', params: {id: this.itemValue.topicId}})
  }

  created () {
    this.mytopics = this.itemValue
    if(this.mytopics.status === 1){
       this.stateType = '已上架'
       this.classType = 'on'
    }
  }

  async modifyDate(e) {
      e.stopPropagation()
      let state = this.mytopics.status
      if(state === 1){
          state = 0
      } else{
          state = 1
      }
      let params = {
          topicId: this.itemValue.topicId,
          status: state
      }
      try {
          const response = await this.$axios.post('/topic/v1/topic/modify', params)
          if (response.status === 0) {
              if(this.stateType === '已上架'){
                  this.stateType = '未上架'
                  this.mytopics.status = 0
                  this.classType = ''
              } else{
                  this.stateType = '已上架'
                  this.mytopics.status = 1
                  this.classType = 'on'
              }
          }
      } catch (e) {
          console.log(e)
      }
  }

  editTopic(e) {
      e.stopPropagation()
      this.$router.push({name: 'EditTopic', params: {id: this.itemValue.topicId}})
  }



  formDate (time) {
    let formTime = formatDate(time).split(' ')
    return formTime[0]
  }

  render () {
    return (
      <dl class="topicItem" onClick={this.handlerPush}>
        <dt><img v-lazy={this.mytopics.cover + '?x-oss-process=image/resize,m_fill,h_200,w_200/quality,Q_80/format,jpg'}/></dt>
        <dd>
          <h2 class="ellipsis">{this.mytopics.title}</h2>
          <h3>{this.mytopics.summary}</h3>
          <h4>
            <font>{this.formDate(this.mytopics.dateAdded)}</font>
            <button onClick={(e) => this.editTopic(e)}>编辑</button>
            {/*<mt-button type="btnBg00" size="small">置顶</mt-button>*/}
            <button class={this.classType} onClick={(e) => this.modifyDate(e)}>{this.stateType}</button>
          </h4>
        </dd>
      </dl>
    )
  }
}
